<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="JS/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script src="JS/jquery-3.5.0.min.js"></script>
    <script src="JS/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- Button trigger modal -->
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="checkMyShareDetail()">
            我的分享
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">我的分享</h4>
                        <button onclick="cancelShares()">批量删除</button>
                    </div>
                    <div class="modal-body">
                        <table width="100%" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <td><input type="checkbox"name="allSel" onchange="cancelAll(this)">全选</td>
                                <td align="center">分享文件</td>
                                <td  width="25%" align="center">链接</td>
                                <td align="center">分享时间</td>
                                <td align="center">失效时间</td>
                                <td align="center">提取码</td>
                                <td align="center">操作</td>
                            </tr>
                            </thead>
                            <tbody id="addList" >
                            </tbody>
                        </table>
                    </div>
                    <template id="templateList">
                        <tr align="center">
                            <td><input type="checkbox" value="{{id}}"name="select"></td>
                            <td>{{name}}</td>
                            <td  width="25%">{{url}}</td>
                            <td>{{createTime}}</td>
                            <td>{{deadline}}</td>
                            <td>{{code}}</td>
                            <td>
                                <button onclick="cancelShare({{id}})">取消分享</button>
                            </td>
                        </tr>
                    </template>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    function checkMyShareDetail(){
        <!--userIdVal暂时写死的数据，需要通过其他模块获取-->
        let userIdVal=1;
        $.ajax({
            type: "post",
            data:{
                userId:userIdVal
            },
            url:"http://localhost:8080/netdisc/share/share/details",
            success:function (resp){
                let addList = $("#addList").html("");
                let templateList = $("#templateList").html();
                let parse = JSON.parse(resp);
                console.log(parse);
                for (let i = parse.data.length-1; i >=0; i--) {
                    let data = new Date(parse.data[i].createTime);
                    commonTime = data.toLocaleDateString();
                    let deadline=parse.data[i].deadline;
                    if (parse.data[i].deadline==9999){
                        deadline="永久有效";
                    }
                    else if(parse.data[i].deadline==0){
                        deadline="小于1天";
                    }else {
                        deadline=parse.data[i].deadline+"天后";
                    }
                    detailsList=templateList
                        .replaceAll("{{id}}",parse.data[i].linkId)
                        .replaceAll("{{name}}",parse.data[i].docName)
                        .replaceAll("{{url}}",parse.data[i].link)
                        .replaceAll("{{createTime}}",commonTime)
                        .replaceAll("{{code}}",parse.data[i].verifyCode)
                        .replaceAll("{{deadline}}",deadline)
                    addList.append(detailsList);
                }
            }
        })
    }
    function cancelShare(id){
        $.ajax({
            type: "post",
            data:{
                linkId:id
            },
            url:"http://localhost:8080/netdisc/share/share/cancel",
            success:function (resp){
                let parse = JSON.parse(resp);
                checkMyShareDetail();
            }
        })
    }
    function cancelShares(){
        let checkboxList = $("input:checked");
        for (let i = 0; i < checkboxList.length; i++) {
            let LinkId = checkboxList[i].attributes[1].nodeValue
            console.log(checkboxList.length)
            console.log(LinkId);
            cancelShare(LinkId);
        }
    }
    function cancelAll(allCheckBox){
        let status=allCheckBox.checked;
        $("input[type='checkbox']").each(function (index,element){
            element.checked =status;
        })
    }
</script>